<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <v-select
              :value.sync="model.f_gasproperties"
              v-model='model.f_gasproperties'
              :options='$parent.$parent.gasproperties'
              placeholder='用气性质'
              condition="f_gasproperties = '{}'"
              close-on-select>
            </v-select>
          </div>
          <div class="form-group">
            <v-select
              :value.sync="model.f_inputtor"
              v-model='model.f_inputtor'
              :options='$parent.$parent.inputtor'
              placeholder='抄表员'
              condition="f_inputtor = '{}'"
              close-on-select>
            </v-select>
          </div>
          <div class="form-group" >
            <v-select :value.sync="model.f_filiale" v-model='model.f_filiale' @Change="$parent.$parent.getAllFiliale(model.f_filiale[0], '营业厅'), $parent.$parent.cleanOutlet()"
            :options='$parent.$parent.filiales' placeholder='分公司'
            close-on-select
            condition="f_filiale = '{}'"></v-select>
          </div>

          <div class="form-group">
            <v-select :value.sync="model.f_outlets" v-model='model.f_outlets'
                :options='$parent.$parent.outlets' placeholder='营业网点'
                close-on-select
                condition="f_outlets = '{}'"></v-select>
          </div>
          <!-- <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_area" placeholder='区域'
            condition="u.f_area like '%{}%'" v-el:xq v-next-el='cx' v-el:resentialarea
            :size="model.f_area ? model.f_area.length * 2 : 2">
          </div> -->


          <label for="f_input_date" class="control-label">执行月份</label>
          <div class="form-group">
            <input type="number" class="form-control" v-model="model.f_input_date" placeholder='yyyyMM'
            condition="" v-el:xq v-next-el='cx' v-el:resentialarea
            :size="model.f_input_date ? model.f_input_date.length * 2 : 2">
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <export-excel :data="{condition: condition}"  bean="月用气量导出" sqlurl="rs/logic/exportfile"></export-excel>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
             <th>用气性质</th>
			       <th>户数</th>
             <th>用气量</th>
             <th>用气金额</th>
             <th>剩余气量户数</th>
             <th>剩余气量</th>
             <th>扣减气量</th>
             <th>扣减气量户数</th>
             <th>欠费气量</th>
             <th>欠费金额</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index+1}}</td>
          <td style="text-align: center;">{{row.f_gasproperties}}</td>
          <td style="text-align: center;">{{row.c}}</td>
          <td style="text-align: center;">{{row.f_oughtamount.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_oughtfee.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.surplusnum}}</td>
          <td style="text-align: center;">{{row.f_surplus_gas.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_haircut_gas.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.haircutnum}}</td>
          <td style="text-align: center;">{{row.qianfeigas.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.qianfeifee.toFixed(2)}}</td>
        </template>

        <template partial='foot'>
          <td style="text-align: center;">合计</td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;">{{model.sums.c}}</td>
          <td style="text-align: center;">{{model.sums.f_oughtamount.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.f_oughtfee.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.surplusnum}}</td>
          <td style="text-align: center;">{{model.sums.f_surplus_gas.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.f_haircut_gas.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.haircutnum}}</td>
          <td style="text-align: center;">{{model.sums.qianfeigas.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.qianfeifee.toFixed(2)}}</td>
        </template>
      </data-grid>
  </criteria-paged>
</template>

<script>
/**
*用户档案查询列表以及添加操作组件
*/
import { PagedList, HttpResetClass } from 'vue-client'
import AppData from '../../../../stores/AppData'
import * as Util from '../../../Util'

export default {
  title: '月用气量查询',
  data () {
    return {
      model: new PagedList('rs/sql/gasUseMonth', 50, {}, {c: '', f_oughtamount: '', f_oughtfee: '', surplusnum: '', f_surplus_gas: '', f_haircut_gas: '', haircutnum: '', qianfeigas: '', qianfeifee: ''}),
      rows: null,
      filialeName: [],
      outletsname: [],
      filiale: '',
      filialetype: ''
    }
  },
  props: {
    excelurl: {
      type: String
    },
    row: {}
  },
  ready () {
    this.$refs.paged.$refs.cri.model.f_input_date = Util.toStandardYearMonth1()
    this.getLoginFiliale(Util.f.parent)
    this.getAllFiliale(this.filiale, '分公司')
    this.search()
  },
  methods: {
    selfSearch (args) {
      this.model.params.fmtDate = this.$refs.paged.$refs.cri.model.f_input_date
      args.condition = `${args.condition} and f_filiale = '${this.filiale}'`
      this.model.search(args.condition, args.model)
    },
    getLoginFiliale (val) {
      if (val.orgtype === '总公司' || val.orgtype === '分公司') {
        this.filiale = val.name
        this.filialetype = val.orgtype
        this.searchCondition = `f_filiale = '${val.name}'`
      } else {
        this.getLoginFiliale(val.parent)
      }
    },
    getAllFiliale (data, type) {
      if (data === undefined || data === '') {
        return
      }
      let val = {source: `tool.getChildrenOfResName($${data}$)`, userid: ''}
      let http = new HttpResetClass()
      http.load('POST', '/rs/search', {data: val}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        res.data.forEach((item) => {
          if (item.orgtype === type) {
            if (type === '分公司') {
              this.filialeName.push({label: item.name, value: item.name})
            }
            if (type === '营业厅') {
              this.outletsname.push({label: item.name, value: item.name})
            }
            this.getAllFiliale(item.name, type)
          }
        })
      })
    },
    cleanOutlet () {
      this.outletsname = []
    },
    search () {
      if (this.filialetype !== '总公司') {
        this.$refs.paged.$refs.cri.model.f_filiale = this.filiale
      }
      this.$refs.paged.$refs.cri.search()
    },
    clean () {
      this.$refs.paged.$refs.grid.select(null)
      this.$dispatch('clean')
    }
  },
  computed: {
    inputtor () {
      return [{label: '全部', value: ''}, ...AppData.getParam('抄表员')]
    },
    gasproperties () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用气性质')]
    },
    operatores () {
      return [{label: '全部', value: ''}, ...AppData.getParam('操作员')]
    },
    filiales () {
      return [{label: '全部', value: this.filiale}, ...this.filialeName]
    },
    outlets () {
      return [{label: '全部', value: ''}, ...this.outletsname]
    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
